<template>
  <div class="map-popup">
    <div class="title">基础信息</div>
    <div class="row">
      <div>
        <span>机籍：</span>
        <span>中国</span>
      </div>
      <div>
        <span>呼号：</span>
        <span>81235</span>
      </div>
    </div>
    <div class="row">
      <div>
        <span>MMSI号：</span>
        <span>41225865359</span>
      </div>
      <div>
        <span>类型：</span>
        <span>爱德华·蒂奇</span>
      </div>
    </div>
    <div class="row">
      <div>
        <span>机宽：</span>
        <span>14M</span>
      </div>
    </div>
    <div class="title">工况信息</div>
    <div class="row">
      <div>
        <span>当前航速：</span>
        <span>14KM/h</span>
      </div>
      <div>
        <span>航向：</span>
        <span>东南</span>
      </div>
    </div>
    <div class="row">
      <div>
        <span>位置信息：</span>
        <span>{{ (coordinate[0] || 0).toFixed(3) + ' ' + (coordinate[1] || 0).toFixed(3) }}</span>
      </div>
      <div>
        <span>主副机功率：</span>
        <span>1522KW</span>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
defineProps<{
  info?: Object,
  coordinate: Array<number>
}>()
</script>
<style scoped>
.map-popup {
  width: 100%;
  height: 100%;
  background-color: rgba(12, 131, 244, .7);
  border: 1px solid #1588f5;
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
}

.map-popup .title {
  width: 100%;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  margin-top: 5px;
}

.map-popup .row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #fef6d5;
  margin-top: 10px;
}
</style>
